<template>
  <div class="index-class">
    <TableDemo01></TableDemo01>
    <DynamicTable :data="tableData"
                  :table-config="tableConfig"
                  select
                  :select-multiple="false"
                  @selection-change="selectionChange"
                  :select-config="selectConfig"
                  @row-click="rowClick"
    >
      <template #t2_header="scopt">
        <div>
          {{ scopt.item.label }}5555
        </div>
      </template>
      <el-table-column label="测试是否支持原生">
        <el-table-column label="原生子项1" prop="tableColumn1"></el-table-column>
        <el-table-column label="原生子项2" prop="tableColunm2"></el-table-column>
      </el-table-column>
    </DynamicTable>
    <h1>配合工具进行单选和多选合并</h1>
    <div>合并-单选</div>
    <div>{{ tableSelect2 }}</div>
    <DynamicTable
      ref="DynamicTableRef2"
      :data="mergeData"
      :span-method="arraySpanMethod2"
      :header-cell-style="headerStyle2"
      select
      :table-config="tableConfig2"
      :select-config="selectConfig2"
      @row-click="handleRowClick2"
      @select="tableSelectClick2"
      @select-all="tableSelectAllClick2"
    >
    </DynamicTable>
    <div>合并-多选</div>
    <div>{{ tableSelect3 }}</div>
    <DynamicTable
      ref="DynamicTableRef3"
      :data="mergeData"
      :span-method="arraySpanMethod2"
      :header-cell-style="headerStyle2"
      select
      select-multiple
      :table-config="tableConfig2"
      :select-config="selectConfig2"
      @row-click="handleRowClick3"
      @select="tableSelectClick3"
      @select-all="tableSelectAllClick3"
    >
    </DynamicTable>
    <Demo></Demo>
  </div>
</template>

<script>
import DynamicTable from "@localModules/ZhiXinLib/element-components/dynamic-table";
import {SelectConfig, TableConfig} from "@localModules/ZhiXinLib/element-components/dynamic-table/TableType";
import elTableUtils from "@localModules/ZhiXinLib/utils/elTableUtils";
import Demo from "./Demo";
import TableDemo01 from "@/views/dynamicTable/TableDemo01";

export default {
  name: "DynamicTableIndex",
  // 定义用到的组件
  components: {
    TableDemo01, DynamicTable,
    Demo
  },
  // 自定义指令，这里定义局部指令
  directives: {},
  // 过滤器
  filters: {},
  // 定义用到的混入，可以重复使用代码
  mixins: [],
  // 定义变量
  data() {
    return {
      tableSelect2: [],
      tableSelect3: [],
      tableData: [
        {
          t1: '1',
          t2: '1',
          t3: '1',
          t4: '1',
        },
        {
          t1: '1',
          t2: '2',
          t3: '1',
          t4: '1',
          t6: '1',
          t7: '2',
          tableColumn1: 'tableColumn1',
          tableColunm2: 'tableColunm2',
        },
      ],
      selectConfig: new SelectConfig({
        selectable: (row, index) => {
          console.log(row, index)
          if (index % 2 === 0) {
            return false
          }
          return true
        }
      }),
      selectConfig2: new SelectConfig({
        prop: 'selectMore'
      }),
      tableConfig: new TableConfig({}, [
        {
          label: '动态配置1',
          typeSlots: (h, item) => {
            return {
              header: (props) => {
                return [
                  h('div', item.label + '动态函数渲染插槽')
                ];
              }
            }
          },
          children: [
            {
              label: 't2',
              prop: 't2',
              formatter: (row, column, cellValue, index) => {
                return "格式化显示" + cellValue;
              },
            },
            {
              label: '测试然后默认插槽',
              prop: 't3',
              minWidth: '150px',
              typeSlots: (h, item) => {
                return {
                  default: (props) => {
                    return [
                      h('div', item.label + '动态函数渲染插槽')
                    ];
                  }
                }
              },
            },
          ]
        },
        {
          label: 't4',
          prop: 't4'
        },
        {
          label: 't5',
          prop: 't5',
        },
        {
          label: 't6',
          children: [
            {
              label: 't7',
              prop: 't7',
            },
            {
              label: 't8',
              prop: 't8'
            }
          ]
        }
      ]),
      tableConfig2: new TableConfig({}, [
        {
          label: 'dd',
          align: 'center',
          minWidth: '56',
          prop: 'genProp0',
        },
        {
          label: 'dd',
          align: 'center',
          minWidth: '56',
          prop: 'genProp1',
        },
        {
          label: 'zs',
          align: 'center',
          children: [
            {
              label: 'tz',
              align: 'center',
              minWidth: '116',
              prop: 'genProp2',
            },
            {
              label: 'nd',
              align: 'center',
              minWidth: '152',
              prop: 'genProp3',
            },
          ],
        },
      ]),
    }
  },
  // 定义计算属性值，加上watch配合，可以读取vuex异步获取的值
  computed: {
    tableParentEl1() {
      return this.$refs.DynamicTableRef2?.$el
    },
    mergeData() {
      const data = [
        {
          genProp0: '66',
          genProp1: '66',
          genProp2: '7383.38',
          genProp3: '1119.59',
        },
        {
          genProp0: '12',
          genProp1: '44',
          genProp2: '7383.38',
          genProp3: '1119.59',
        },
        {
          genProp0: '12',
          genProp1: '33',
          genProp2: '7383.38',
          genProp3: '1119.59',
        },
      ]
      return elTableUtils.mergeTableRow(data, ['genProp0'])
    },
    // indexProps2: {
    //		get(){
    //			//return this.name.split('').reverse().join('');
    //			return this.firstName+''+this.lastName;
    //		},
    //		set(value){
    //		}
    // }
  },
  // 监听属性值的变化
  watch: {
    // indexProps(val){
    //   console.log(val)
    // },
    // indexProps2: {
    //   handler(value, oldValue) {
    //
    //   },
    //   immediate: true,
    //   deep: true
    // }
  },
  // 生命周期钩子函数begin
  // 在页面节点挂载完执行
  mounted() {
  },
  // 在页面创建完执行
  created() {
  },
  // 生命周期钩子函数end
  // 定义方法
  methods: {
    selectionChange(rows) {
      console.log(rows)
    },
    tableSelectClick2(selection, row) {
      this.tableSelect2 = elTableUtils.selectionChangeWithRowMerge(this.mergeData, this.tableSelect2, row, 'genProp0', this.$refs.DynamicTableRef2)
    },
    tableSelectAllClick2(selection) {
      this.tableSelect2 = elTableUtils.selectAllClickWidhRowMerge(this.mergeData, selection)
    },
    handleRowClick2(row, column, event) {
      this.tableSelect2 = elTableUtils.selectionChangeWithRowMerge(this.mergeData, this.tableSelect2, row, 'genProp0', this.$refs.DynamicTableRef2)
    },
    tableSelectClick3(selection, row) {
      this.tableSelect3 = elTableUtils.selectionChangeWithRowMerge(this.mergeData, this.tableSelect3, row, 'genProp0', this.$refs.DynamicTableRef3)
    },
    tableSelectAllClick3(selection) {
      this.tableSelect3 = elTableUtils.selectAllClickWidhRowMerge(this.mergeData, selection)
    },
    handleRowClick3(row, column, event) {
      this.tableSelect3 = elTableUtils.selectionChangeWithRowMerge(this.mergeData, this.tableSelect3, row, 'genProp0', this.$refs.DynamicTableRef3)
    },
    headerStyle2({row, column, rowIndex, columnIndex}) {
      if (rowIndex === 0) {
        if (columnIndex === 0) {
          this.$nextTick(() => {
            if (this.tableParentEl1?.getElementsByClassName(column.id).length !== 0) {
              this.tableParentEl1
                ?.getElementsByClassName(column.id)[0]
                .setAttribute('colSpan', '2')
            }
          })
        }
        if (columnIndex === 1) {
          return 'display: none'
        }
      }
    },
    rowClick(row, column, event) {
      console.log('rowClick是否正常', row, column, event)
    },
    arraySpanMethod2({row, column, rowIndex, columnIndex}) {
      if (rowIndex === 0) {
        if (columnIndex === 0) {
          return [1, 2]
        } else if (columnIndex === 1) {
          return [0, 0]
        }
      } else {
        const result = elTableUtils.mergeSelectWithOtherProp(row, column, this.selectConfig2.prop, 'genProp0')
        if (result) {
          return result
        }
        const span = column['property'] + '-span'
        if (row[span]) {
          return row[span]
        }
      }
    }
  },
}
</script>
<style scoped lang="scss">
.index-class {
}
</style>
